<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
        style="width: 80%"
    >
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="备份ID" prop="backupId">
                <el-input
                    v-model="backupId"
                    placeholder="请输入备份ID"
                    disabled
                ></el-input>
            </el-form-item>

            <el-form-item label="原仓库ID" prop="sourceRepositoryId">
                <el-input
                    v-model="sourceRepositoryId"
                    placeholder="请输入原仓库ID"
                    disabled
                ></el-input>
            </el-form-item>

            <el-form-item label="目标仓库ID" prop="tagRepositoryId">
                <el-input
                    v-model="tagRepositoryId"
                    placeholder="请输入目标仓库ID"
                    disabled
                ></el-input>
            </el-form-item>
            <el-form-item label="原镜像名称" prop="sourceImageName">
                <el-input
                    v-model="sourceImageName"
                    placeholder="请输入原镜像名称"
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item label="原镜像版本" prop="sourceImageVersion">
                <el-input
                    v-model="sourceImageVersion"
                    placeholder="请输入原镜像版本"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    查询
                </el-button>
                <el-button @click="resetForm(queryForm, params, getDataList)">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: current,
                pageSize: size,
                total: total,
            }"
            style="max-width: 100%; /* 最大宽度不超过父元素 */ max-height: 100%"
        >
            <el-table-column
                prop="backupId"
                label="备份ID"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="sourceRepositoryId"
                label="原仓库"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="tagRepositoryId"
                label="目标仓库"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="sourceImageName"
                label="原镜像名称"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="sourceImageVersion"
                label="原镜像版本"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="targetImageName"
                label="目标镜像名称"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="targetImageVersion"
                label="目标镜像版本"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="updateTime"
                label="更新时间"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="backupSuccess"
                label="是否备份成功"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="createTime"
                label="创建时间"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                prop="id"
                label="主键ID"
                show-overflow-tooltip
            ></el-table-column>
        </ve-table>
    </el-dialog>
</template>

<script setup>
import {
    reactive,
    ref,
    toRefs,
    defineProps,
    defineEmits,
    onMounted,
} from "vue";
import {
    onSubmit,
    handleCurrentChange,
    handleSizeChange,
    resetForm,
} from "@/views/pages/common";

const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "查看备份详情",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};

// const form = reactive({
//   url: "",
//   username: "",
//   password: "",
//   isDefault: false,
// });

const params = reactive({
    backupId: "",
    sourceImageName: "",
    sourceImageVersion: "",
    sourceRepositoryId: "",
    tagRepositoryId: "",
    size: 10,
    current: 1,
    total: 0,
});

const {
    backupId,
    sourceImageName,
    sourceImageVersion,
    sourceRepositoryId,
    tagRepositoryId,
    size,
    current,
    total,
} = toRefs(params);

const queryForm = ref(null);
const tableData = ref([]);
rowData.value &&
    ((params.backupId = rowData.value.id),
    (params.sourceRepositoryId = rowData.value.sourceRepositoryId),
    (params.tagRepositoryId = rowData.value.tagRepositoryId));

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } =
        await VE_API.DockerRepositoryBackupRecordApi.dockerRepositoryBackupRecordFindPage(
            params,
        );
    if (code === 0) {
        const { size, current, total, records } = data;
        params.size = size;
        params.current = current;
        params.total = total;
        tableData.value = records;
    }
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss">
.fl {
    float: left;
}
.p0 {
    padding: 0 !important;
}
.role_edit_item {
    width: 100%;
}
</style>
